<template>
    <div>
        <el-upload action="#" list-type="picture-card" :auto-upload="false">
            <el-icon>
                <Plus />
            </el-icon>
            <template #file="{ file }" style="margin-top: 20px;">
                <div>
                    <el-image :src="file.url" style="width: 10vw;height: 21vh;" alt="" />
                    <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                            <el-icon><zoom-in /></el-icon>
                        </span>
                        <span v-if="!disabled" class="el-upload-list__item-delete">
                            <el-icon>
                                <!-- <Download /> -->
                                <el-icon>
                                    <Upload @click="handleDownload(file)" />
                                </el-icon>
                            </el-icon>
                        </span>
                        <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                            <el-icon>
                                <Delete />
                            </el-icon>
                        </span>
                    </span>
                </div>
            </template>
            <el-dialog v-model="dialogVisible">
                <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
        </el-upload>
        <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
    </div>
</template>

<script lang='ts' setup>
import { ref, reactive } from 'vue'
import { Delete, Upload, Plus, ZoomIn } from '@element-plus/icons-vue'
import { ElMessage, UploadFile } from 'element-plus'
import api from '@/api'


const dialogImageUrl = ref<string>('')
const dialogVisible = ref<boolean>(false)
const disabled = ref(false)
const fileArr = reactive<Array<object>>([])
const handleRemove = (file: UploadFile) => {
    console.log(file)
    file.url = ''
}

const handlePictureCardPreview = (file: UploadFile) => {
    console.log(file)
    dialogImageUrl.value = file.url!
    dialogVisible.value = true
}
const emit = defineEmits<{ (e: 'uploadFile', file: UploadFile): void }>()
const handleDownload = async (file: UploadFile) => {
    console.log(file)
    fileArr.push(file)
    emit('uploadFile', file)
    const result = await api.systemSetting.upload.uploadImgApi(file.raw)
    console.log(result);
    if (result.status === 200) {
        ElMessage.success('上传成功')
    } else {
        ElMessage.warning('上传失败')
    }

}



</script>

<style lang='scss' scoped></style>